<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="mycss/redBtn.css" />
</head> 
<style>
#page
{
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #333;
}

h2
{
	position: relative;
	width: 50%;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 70px;
	margin: 30px 10px 10px -70px;
	color: #555;
	background-color: #999;
	text-shadow: 0px 1px 2px #bbb;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
}
</style>
<?php require("check_login_r.php"); ?>
<?php require("user_settings.php");  ?>

            <div class="codrops-top">
                <a href="">
				<strong>歡迎使用【我的特約廠商】</strong>
                </a>
                <span class="right">
                    <a href="logout_r.php">
                        <strong>登出</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div>
<?php
$users=getUser($_SESSION['id_r']);#json_decode(file_get_contents("users/".$_SESSION['id_r']."/settings.json"), true);
$cname=$users['cname'];
echo "<h2>$cname 的特約資訊</h2>";
?>
<BR>
<BR>
<!--<iframe id='gmap' width="320" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=台灣新竹市大學路&z=16&iwloc=near&output=embed&t=></iframe> -->
<div id='tableStatus'></div>
<table id="mytable" border=1 style="margin: 0 0 0 1.5em">
	<col style="width:10%">
	<col style="width:5%">
	<col style="width:25%">
	<col style="width:10%">
	<col style="width:40%">
	<tr align=center>
		<td> 廠商名稱</td> 
		<td> 分類 </td>
		<td> 地址 </td>
		<td> 電話 </td>
		<td> 優惠 </td>
	</tr>
</table>


<script lang=javascript>
var selectedColor='#BCD4EC';
var selectedColorInner="rgb(188, 212, 236)";
var changed = false;




<?php
	if(file_exists("users/".$_SESSION['id_r']."/offer.txt"))
		echo "var json_content_text = '" .getOffer($_SESSION['id_r']);
	else 
		echo "var json_content_text=\"\";";
?>
	</script>
	
	<script>
	function tableToJson(table) {
		var data = []; // first row needs to be headers var headers = [];
		var headers = [];
		for (var i=0; i<table.rows[0].cells.length; i++) {
			headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
		}
		// go through cells
		for (var i=1; i<table.rows.length; i++) {
			var tableRow = table.rows[i]; var rowData = {};
			for (var j=0; j<tableRow.cells.length; j++) {
				rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
			} data.push(rowData);
		}
		return data; 
	}

function forclick() {
	var table = document.getElementById("mytable");
	//for(var i=1;i<table.rows.length;i++) 
	{
		unhighlight();
		this.origColor=this.style.backgroundColor;
		this.style.backgroundColor=selectedColor;
		var f= document.getElementById('gmap');
		var addr=this.cells[2].innerHTML;
		//f.src = "http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=台灣"+addr+"&z=16&iwloc=near&output=embed&t=";
		//alert(this.cells[2].innerHTML);

	}
              
}
function loadTable() {
	if(json_content_text.length ==0) {
		var status = document.getElementById("tableStatus");
		status.innerHTML = "<H2> 目前沒有任何特約資訊喔！ </H2>";
		return;
	}
	var obj = JSON.parse(json_content_text);
	var num = 1;
	for(i=0;i<obj.length;i++) {
		var Tr = document.getElementById("mytable").insertRow(num);
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=obj[i]["廠商名稱"];
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=obj[i]["分類"];
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=obj[i]["地址"];
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=obj[i]["電話"];
		Td = Tr.insertCell(Tr.cells.length);
		Td.innerHTML=obj[i]["優惠"];
		//unhighlight();
		Tr.onclick = (function() {
				return forclick;
				})(num+1);

		num++;
	}
}
function example4() {
	var table = document.getElementById("mytable");
	var rows = table.rows; // or table.getElementsByTagName("tr");
	for (var i = 1; i < rows.length; i++) {
		rows[i].onclick = (function() { // closure
				var cnt = i; // save the counter to use in the function
				return forclick;
        })(i);
    }
	loadTable();
}
function unhighlight() {
	 var table = document.getElementById('mytable');
 for (var i=0;i < table.rows.length;i++){
   var row = table.rows[i];
   row.style.backgroundColor='white';
   row.hilite = false;
 }
}
window.onload = function() { example4(); }


window.onbeforeunload = function() { 
		if(changed == false)
			return ;
		else
			return "";
      //if(confirm('are you sure to exit?')) 
      //     return true; 
      //else 
      //     return false; 
};


		</script>
